<template>
  <div class="app">
    <div class="title">
        <input type="button" value="＜" @click="back">
        <h2>免费好课</h2>
    </div>
    <div class="banner">
      <img src="/zhyimg/freeBanner.png" alt="" srcset="">
    </div>
    <h3>特别推荐</h3>
    <ul>
        <li v-for="(json,index) in dataclass" :key="index">
            <div class="left">
                <img :src="json.src" alt="">
            </div>
            <div class="right">
                <p class="top">{{json.text}}</p>
                <p class="bottom">{{json.introduce}}</p>
            </div>
        </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "Class",
  data() {
    return {
        dataclass:{
        },
    };
  },
  methods: {
    back() {
      this.$router.push("/");
    },
  },
  created() {
    axios
    .get("http://localhost:3000/Freeimg")
    .then((res) => {
      this.dataclass = res.data;
    })
  },
};
</script>

<style scoped>
@import url(./../../assets/zhy/iconfont/iconfont.css);

input {
  border: none;
  outline: none;
}
h2{
  text-align: center;
  line-height: .5rem;
  margin-bottom: .1rem;
}
h3{
    width: 100%;
    line-height: .4rem;
    font-size: .18rem;
    text-align: left;
    margin-left: .1rem;
}
.title{
    position: fixed;
    top: 0;
    width: 100%;
    height: .5rem;
    background-color: #fff;
}
.title input{
    float: left;
    margin-left: 0.2rem;
    font-size: .24rem;
    margin-top: .08rem;
    background-color: #fff;
}
.banner{
    width: 3.5rem;
    margin: 0 auto;
}
ul{
    list-style:none;
    width: 3.5rem;
    margin: 0 auto;
    padding-left: .2rem;
}
ul li{
  height: .7rem;
  margin: 15px 0px;
}
ul li .left{
    float: left;
    width: 1.3rem;
}
ul li .right{
    float: left;
    margin-left: 0.2rem;
    text-align: left
}
ul li .right .top{
    font-size: .14rem;
    color: #000;
    height: .5rem;
}
ul li .right .bottom{
    font-size: .12rem;
    color: #888;
}
</style>

